<template>
    <div class="comments">

         <Row>

        <Col span="4"><Button type="primary" @click="addcomData">添加数据</Button>
        <Button type="error" @click="removescomData">删除多条</Button>
        </Col>
        <Col span="4"><Input search enter-button v-model="name" style="width:200px float:'left'" placeholder="请输入关键字" @on-search="searchcomData"/></Col>
        <Col span="8"></Col>
    </Row>
        <Table stripe height="500" border :columns="columns" :data="comlistData" @on-selection-change="onSelectionChange">
           <!-- 使用插槽来渲染星星控件 -->
            <template slot-scope="{ row,column,index }" slot="score">
                <Rate disabled  v-model="row.plscore" />
            </template>
        </Table>
        <Page :total="total" show-sizer @on-change="onChangePage" @on-page-size-change="onPageSizeChange" :page-size-opts="[5,10,20,30,40,50]"/>
        <Modal
        v-model    = "modal3"
        title      = "评论信息"
        @on-ok     = "ok"
        width = '700'
        @on-cancel = "cancel"
        :footer-hide = true>
        <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
            <FormItem label="评论用户" prop="pluser">
                <Input v-model="formValidate.pluser" placeholder="请输入用户"></Input>
            </FormItem>
            <FormItem label="评论分数" prop="plscore">
                <Rate show-text v-model="formValidate.plscore" />
            </FormItem>
            <FormItem label="评论内容" prop="plcontent">
                <quill-editor v-model="formValidate.plcontent"
                    ref = "myQuillEditor"
                    >
                </quill-editor>
            </FormItem>

            <FormItem>
                <Button type="primary" @click="handleSubmit('formValidate')">提交</Button>
                <Button @click="handleReset('formValidate')" style="margin-left: 8px">清除</Button>
            </FormItem>
        </Form>
    </Modal>

    </div>
</template>
<script>
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { quillEditor } from 'vue-quill-editor'
export default {
    props:['bdid','bdtype'],
    components: {
        quillEditor,
    },
    data(){
        return {
            module    : 'comment',
            modal3      : false,
            comlistData: [],
            total   : 0,
            page    : 1,
            rows    : 10,
            ids     :[],
            name    :'',
            formValidate: {
                pluser:'',
                plscore:3,
                plcontent:'',
            },
            ruleValidate: {
                pluser: [
                    {required: true, message: '评论用户不能为空', trigger: 'blur' },
                ],
                plcontent: [
                    { required: true,message: '评论内容不能为空', trigger: 'blur' }
                ],

            },
            columns: [
                {
                    type: 'selection',
                    width: 80,
                    align: 'center',
                },
                {
                    title: '评论用户',
                    key  : 'pluser',
                    width:150
                },
                {
                    title: '评论分数',
                    key  : 'plscore',
                    sortable: true,
                    width:180,
                    //加载插槽
                    slot: 'score',
                },
                {
                    title: '日期',
                    key  : 'pldate',
                    width:150,
                    render:function(h,params){
                        //将数据库中自动生成的柏林时间转化为北京时间
                        var date=new Date(+new Date(new Date(params.row.pldate).toJSON()) + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '');
                        return h('span',date);
                    }
                },

                {
                    title: '操作',
                    key: 'action',
                    width: 150,
                    align: 'center',
                    render: (h, params) => {
                        return h('div', [
                            h('Button', {
                                props: {
                                    type: 'primary',
                                    size: 'small'
                                },
                                style: {
                                    marginRight: '5px'
                                },
                                on: {
                                    click: () => {
                                        // this.show(params.index)
                                        this.editData(params.row._id);

                                    }
                                }
                            }, '修改'),
                            h('Button', {
                                props: {
                                    type: 'error',
                                    size: 'small'
                                },
                                on: {
                                    click: () => {
                                        this.removeData(params.row._id);
                                    }
                                }
                            }, '删除')
                        ]);
                    }
                }
            ]
        }
    },
    methods: {
        //加评论
        addcomData(){
            //重置表单
        Object.assign(this.$data.formValidate,this.$options.data().formValidate);
        //删除ID 和日期  这两个都是自动生成的
        delete this.formValidate._id;
        delete this.formValidate.pldate;
        //添加绑定bdid 和绑定的type
        this.formValidate.bdid=this.bdid;
        this.formValidate.bdtype=this.bdtype;
        this.modal3=true;
        },
        //修改评论
        //先用ID请求获取数据
        editData(id){
          this.axios({
            url:`${this.GLOBAL.serverurl}${this.module}/${id}`,
            method:'get'
          }).then(res=>{
            //重置表单
            Object.assign(this.$data.formValidate,this.$options.data().formValidate);
            //然后重新赋值
            this.formValidate = res.data;
            this.modal3 = true;
          })
        },
        //删除一条
        removeData(id){
            this.$Modal.confirm({
              title: '确认',
              content: '<p>你是否确认删除记录?</p>',
              onOk: () => {
                this.axios({
                  url:`${this.GLOBAL.serverurl}${this.module}/${id}`,
                  method:'delete'
                }).then(res=>{
                  this.getcomData();
                   this.$Message.info('Clicked ok');
                })
              },
              onCancel: () => {
                  this.$Message.info('Clicked cancel');
              }
          });
        },
        //删除多条
        removescomData(){
            this.$Modal.confirm({
              title: '确认',
              content: '<p>你是否确认删除记录?</p>',
              onOk: () => {
                this.axios({
                  url:`${this.GLOBAL.serverurl}${this.module}/removes`,
                  method:'post',
                  data:{
                    ids: this.ids.toString()
                  }
                }).then(res=>{
                  this.getcomData();
                  this.$Message.info('Clicked ok');
                })
              },
              onCancel: () => {
                  this.$Message.info('Clicked cancel');
              }
          });
        },
        //搜索评论
        searchcomData(){
            this.getcomData();
        },
        //多选数组
        onSelectionChange(selection){
          var selectionLen = selection.length;
          this.ids=[];
          if(selectionLen>0){
            for(let i=0;i<selectionLen;i++){
              this.ids.push(selection[i]._id);
            }
          }
        },
        //分页功能改变值
        onChangePage(page){
          this.page = page;
          this.getcomData();
        },
        onPageSizeChange(pageSize){
          this.rows = pageSize;
          this.getcomData();
        },
        //modal3 里的提交和取消
        handleSubmit (name) {
            this.$refs[name].validate((valid) => {
                if (valid) {
                  if(this.formValidate._id && this.formValidate._id.trim().length>0){
                    // edit
                    this.axios({
                      url   : `${this.GLOBAL.serverurl}${this.module}/${this.formValidate._id}`,
                      method: 'put',
                      data  : this.formValidate
                    }).then(res=>{
                      this.$Message.success('修改数据成功!');
                      this.modal3 = false;
                      this.getcomData();

                    })
                  }else{
                    // add
                    this.axios({
                      url   : `${this.GLOBAL.serverurl}${this.module}`,
                      method: 'post',
                      data  : this.formValidate
                    }).then(res=>{

                      this.$Message.success('添加数据成功!');
                      this.modal3 = false;
                      this.getcomData();
                      this.$emit('plnum',1);
                    })
                  }
                } else {
                    this.$Message.error('Fail!');
                }
            })
        },
        handleReset (name) {
            this.$refs[name].resetFields();
        },
        ok () {
            this.$Message.info('Clicked ok');
        },
        cancel () {
            this.$Message.info('Clicked cancel');

        },
        //刷新数据
        getcomData(){
            this.axios({
            url   : `${this.GLOBAL.serverurl}${this.module}/list`,
            method: 'post',
            data  : {
              page: this.page,
              rows: this.rows,
              name: this.name,
              bdid: this.bdid,
              bdtype:this.bdtype,
            }
          }).then(res=>{
            this.comlistData = res.data.rows;
            this.total    = res.data.total;
          })
        }
    },
}
</script>
<style scoped>
</style>